<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <script src="jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="">
  <title>jq实现基础的电梯导航</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      background-color: #fff;
    }

    body {
      height: 3000px;
      background-color: #f1f1f1;
    }

    .aside {
      position: fixed;
      right: 1%;
      top: 50%;
      transform: translateY(-50%);
    }

    .aside li {
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      padding: 0 20px;
    }

    .aside li:hover {
      background-color: green;
      color: #fff;
    }

    .aside a {
      display: block;
      background-color: #fff;
      text-align: center;
      cursor: pointer;
      padding: 10px 20px;
      text-decoration: none;
      color: #000;
    }

    .aside a:hover {
      background-color: green;
      color: #fff;
    }

    .active {
      color: green;
    }

    .content {
      width: 60%;
      margin: 0 auto;
    }

    .box {
      height: 380px;
      margin-top: 20px;
      background-color: #68945c;
    }

    .box:first-child {
      margin-top: 0;
    }
  </style>
</head>

<body>
<!-- 左侧导航strat -->
<div class="aside">
  <ul>
    <li class="active">动漫</li>
    <li>电视剧</li>
    <li>电影</li>
    <li>歌曲</li>
  </ul>
  <a href="#" class="back">
    <!-- 此处的小图标使用的是bootstrap框架里面的字体图标 -->
    <span class="glyphicon glyphicon-menu-up"></span>
    <br />顶部
  </a>
</div>
<!-- 左侧导航end -->
<!--中间内容strat -->
<div class="content">
  <div class="box">动漫</div>
  <div class="box tv">电视剧</div>
  <div class="box">电影</div>
  <div class="box">歌曲</div>
</div>
<!--中间内容end -->
<script>
  $(function() {
    //1.页面滚动监听
    $(window).scroll(function() {
      // 获取所有的内容盒子，并进行遍历输出，如果页面卷去高度大于元素距离文档顶部的距离，那么就让右侧导航栏相应的li添加样式。
      // 页面滑到相对应的内容区域 导航栏选项添加或删除类
      // 通过内容区域索引号 找到导航栏选项的索引
      $(".content .box").each(function(i, ele) {
        if ($(document).scrollTop() >= ($(ele).offset().top)) {
          // 卷去的高度一旦开始超过元素距离文档顶部的距离，说明已经到了位置。
          $(".aside li").eq(i).addClass("active").siblings().removeClass('active');
        }
      })
    });
    // 2.点击导航栏，内容跳转到相应模块。
    $('.aside li').on('click', function() {
      // 获取当前被点击的li的索引号
      var index = $(this).index();
      var box = $(".content .box").eq(index).offset().top;
      // 动画里面有三个参数：距离上方为0，滚动完成时间，完成后的函数。
      $('html,body').stop().animate({
        scrollTop: box
      }, 500, function() {
        $(".aside li").eq(index).addClass("active").siblings().removeClass("active");
      });
    });
    // 3.返回顶部
    $(".back").on("click", function() {
      $("html,body").stop().animate({
        scrollTop: 0
      }, 500)
    });
  });
</script>
</body>

</html>
